<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Wind Animation</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
    <!-- <link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css"> -->
    <link rel="stylesheet" href="css/style.css">
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0px 0 0 0;
        }

        #mapCanvas {
            padding: 0;
            height: 100%;
        }
    </style>
    <script>
        var dojoConfig = {
            paths: {
                plugins: location.pathname.replace(/\/[^/]+$/, "") + "/plugins"
            }
        };
    </script>
    <script src="js/windy.js"></script>
    <script src="https://js.arcgis.com/3.20compact/"></script>
    <!-- <script src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script> -->
    <script>
        var map, rasterLayer;
        var canvasSupport;
        require([
            "esri/map", "esri/layers/ArcGISTiledMapServiceLayer",
            "esri/domUtils", "esri/request",
            "dojo/parser", "dojo/number", "dojo/json", "dojo/dom",
            "dijit/registry", "plugins/RasterLayer", "esri/layers/WebTiledLayer",
            "esri/config",
            "dojo/domReady!"
        ], function (
            Map, ArcGISTiledMapServiceLayer,
            domUtils, esriRequest,
            parser, number, JSON, dom,
            registry, RasterLayer, WebTiledLayer, esriConfig
        ) {
            parser.parse();
            // does the browser support canvas?
            canvasSupport = supports_canvas();
            map = new Map("mapCanvas", {
                center: [-99.076, 39.132],
                zoom: 3,
                basemap: "dark-gray"
            });
            map.on("load", mapLoaded);

            function mapLoaded() {
                // Add raster layer
                if (canvasSupport) {
                    rasterLayer = new RasterLayer(null, {
                        opacity: 0.55
                    });
                    map.addLayer(rasterLayer);
                    map.on("extent-change", redraw);
                    map.on("resize", function () {});
                    map.on("zoom-start", redraw);
                    map.on("pan-start", redraw);
                    var layersRequest = esriRequest({
                        url: 'data/gfs.json',
                        content: {},
                        handleAs: "json"
                    });
                    layersRequest.then(
                        function (response) {
                            windy = new Windy({
                                canvas: rasterLayer._element,
                                data: response
                            });
                            redraw();
                        },
                        function (error) {
                            console.log("Error: ", error.message);
                        });
                } else {
                    dom.byId("mapCanvas").innerHTML =
                        "This browser doesn't support canvas. Visit <a target='_blank' href='http://www.caniuse.com/#search=canvas'>caniuse.com</a> for supported browsers";
                }
            }
            // does the browser support canvas?
            function supports_canvas() {
                return !!document.createElement("canvas").getContext;
            }

            function redraw() {
                rasterLayer._element.width = map.width;
                rasterLayer._element.height = map.height;
                windy.stop();
                var extent = map.geographicExtent;
                setTimeout(function () {
                    windy.start(
                        [
                            [0, 0],
                            [map.width, map.height]
                        ],
                        map.width,
                        map.height, [
                            [extent.xmin, extent.ymin],
                            [extent.xmax, extent.ymax]
                        ]
                    );
                }, 500);
            }
        });
    </script>
</head>

<body>
    <div id="mapCanvas">
    </div>
</body>

</html>